<script setup>
import {ref} from "vue";
import request5151 from "../../../utils/request5151.js";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
const router = useRouter()
const MyOrder =ref()
//获取我的订单数据
const getMyOrder = () => {
  if(sessionStorage.getItem('snumber') === null){
    ElMessage.error("请先登录")
    return
  }
  request5151({
    url: '/order/getIsOrderBySNumber',
    method: 'get',
    params: {sNumber: sessionStorage.getItem('snumber')}
  }).then((res) => {
    MyOrder.value = res.data.data
  }).catch((err) => {
    ElMessage.error(err.message)
  })
}
getMyOrder()
// 支付
const pay = async (orderId) => {
  window.open('http://localhost:5151/alipay/pay?orderId=' + orderId)
}

</script>

<template>
  <div class="toPay_All">
    <el-card>
      <h3>我的待付款</h3>
      <el-table style="width: 100%" :data="MyOrder" empty-text="暂无账单">
        <el-table-column prop="orderId" label="订单号" width="200"/>
        <el-table-column prop="snumber" label="学号" width="110"/>
        <el-table-column prop="liveCost" label="生活费" width="100"/>
        <el-table-column prop="studyCost" label="学费" width="100"/>
        <el-table-column prop="otherCost" label="其他费用" width="80"/>
        <el-table-column prop="name" label="费用项" width="160"/>
        <el-table-column prop="payNo" label="支付单号" width="180"/>
        <el-table-column prop="payTime" label="支付时间" width="140"/>
        <el-table-column prop="total" label="总金额"/>
        <el-table-column prop="payStatus" label="状态">
          <template #default="scope">
            <el-tag v-if="scope.row.payStatus === '已支付'" style="color: green">{{ scope.row.payStatus }}</el-tag>
            <el-tag v-else style="color: red">{{ scope.row.payStatus }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" size="small"
                       v-if="scope.row.payStatus !== '已支付'"
                       @click="pay(scope.row.orderId)">去支付
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<style scoped>
.toPay_All {
  text-align: center;
}
</style>
